<template>
  <div class="register">
    <div id="header">
      <div class="header_title">
        <span class="title_con" >SQL学习系统</span>
      </div>
    </div>
  
    <div id="content">
      <center>
        <div class="con">
        <div class="con_title">
          <span class="con_title_sp">系统账号注册</span>
        </div>
        <form class="con_panel" @submit.prevent="register">
          <div class="con_input">
            <span>用&nbsp;户&nbsp;名：</span>
            <input type="text" id="username" v-model="username" placeholder="请输入用户名"/>
          </div>
          <div class="con_input">
            <span>手&nbsp;机&nbsp;号：</span>
            <input type="phone" id="phone" v-model="phone" placeholder="请输入手机号"/>
          </div>
          <div class="con_input">
            <span>邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱：</span>
            <input type="email" id="email" v-model="email" placeholder="请输入邮箱"/>
          </div>
          <div class="con_input">
            <span>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：</span>
            <input type="password" id="password" v-model="password" placeholder="请输入密码"/>
          </div>
          <div class="con_input">
            <span>确认密码：</span>
            <input type="password" id="confirmedPassword" v-model="confirmedPassword" placeholder="请确认密码"/>
          </div>
          <div class="con_select">
            <input type="radio" name="role" v-model="roleId" value="2" />&nbsp;学生
            <span>&nbsp;&nbsp;</span>
            <input type="radio" name="role" v-model="roleId" value="1" />&nbsp;教师
          </div>
          <div class="error-message">{{ error_message }}</div>
          <button type="submit" value="注册" class="submit-btn">注册</button>
        </form>
      </div>
      </center>
    </div>
   
  </div>  
  </template>
    
  
  
  <script>

    import {ref} from 'vue';
    import router from "@/router/index";
    import $ from 'jquery';

    export default{
      components:{},
  
    //   data(){
    //   return{
    //     roleId : 2,
    //   }
    // },
      setup(){
        let username = ref('');
        let phone = ref('');
        let email = ref('');
        let password = ref('');
        let confirmedPassword = ref('');
        let roleId = ref('');
        let error_message = ref('');

        const register = () => {
          //不会修改state的值,所以不写入store中

          // console.log("username:");
          // console.log(username);
          // console.log("phone:");
          // console.log(phone);
          // console.log("email:");
          // console.log(email);

          $.ajax({   //注册新账号
                url: "http://localhost:8090/sls/account/register",
                type: "post",

                data: { 
                      username: username.value,
                      phone: phone.value,
                      email: email.value,
                      password: password.value,
                      confirmedPassword: confirmedPassword.value, 
                      roleId : roleId.value,
                },
                success(resp){
                  //console.log(resp);
                  if(resp.error_message === "success"){
                    router.push({name : "login"});  //注册成功,跳转到登录页面
                  }else{
                    error_message.value = resp.error_message;
                  }
                }
           });
        }
          return {
            username,
            phone,
            email,
            password,
            confirmedPassword,
            roleId ,
            error_message,
            register,
          }
      }
    }


  </script>
   
  
  <style scoped>
    body{
      padding: 0px;
      margin: 0px;
    }
    a{
      text-decoration: none;
    }
    .register{
      box-sizing: border-box;
      background-image: url("@/assets/img/bg2.jpg");
      background-size: cover;
    }
  
    #header{
      width: auto;
      min-height: 70px;
      line-height: 70px;
    }
    /* #header{
      border-bottom: medium solid #fff; 
    } */
    span.title_con{
      display: block;
      text-align:center;
      font-style: normal;
      font-size: 2em;
      font-weight:800 ;
      color: #000;
    }
    #content{
      width: auto;
      height:28em;
      text-align: center;
    }
    #footer{
      width: auto;
      min-height: 60px;
      line-height:60px;
    }
    #footer{
      border-top: thin solid #39A631;
    }
    .con{
      width: 35%;
      height: 27em;
      background-color: #D4E1F2;
      margin-top:1em;
    }
    .con{
      /* box-sizing: border-box; */
      border: 10px solid #84AAD7;
      border-radius: 5px;
    }
    .con_title{
      box-sizing: border-box;
      background-color: #8272c1;
      width: auto;
      height: 3.5em;
      line-height: 3.5em;
      text-align: center;
    }
    .con_title_sp{
      font-size: 1.5em;
      font-weight: 800;
      color: #FFF;
    }
    .con_input{
      margin: 0.5em 0 0.5em 0;
    }
    .submit-btn{
      width: 8em;
      height: 2em;
      background-color: #62ab00;
      border-radius: 4px;
      border: 0px;
      color: #fff;
  
      font-size: 1em;
      font-weight: bold;
    }
    .con_input span{
      font-size: 1em;
      font-weight: bold;
      color: #333;
    }
    .con_input input{
      width: 15em;padding: 0.5em 1em;
      border: 1px solid #bbb;
    }
    .submit-btn{
      margin: 1em 0 1em 0;
    }
    .con_select{
      /* margin-left: 2em; */
      font-size: 1em;
      color: #333;
      }
      .error-message{
        color:red;
      }
  </style>
  